<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery/jquery3.1.1.js"></script>
    <!-- 引入bootstrap，需要两个，分别是：css，js（js引入的时候先引入jquery） -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        body{
           text-align: center;
        }
    </style>

</head>

<body>


 <a  style="font-size: 25px" >留言信息</a>

<table class="table table-striped table-bordered table-hover">
    <thead>
    <th><input type="checkbox" id="chkbtn" onclick="checkboxBtn()"></th>
    <th>留言编号</th>
    <th>用户名称</th>
    <th>用户邮箱</th>
    <th>联系电话</th>
    <th>反馈信息</th>
    <th>反馈时间</th>
    <th>图片</th>
    <th>操作</th>

    </thead>
    <tbody id="tb">
    <tr>
        <td><input type="checkbox" name="chk"></td>
        <td id="id" class="id"></td>
        <td id="u_name" class="u_name"></td>
        <td id="u_email" class="u_email"></td>
        <td id="u_phone" class="u_phone"></td>
        <td id="message" class="message"></td>
        <td id="create_time" class="create_time"></td>
        <td><img id="img"  class="img" src="" width="100px" height="100px"></td>
        <td><button onclick="deleteMessage(${data.data[i].id})">删除</button></td>
    </tr>

    </tbody>

</table>
 <tfoot>
 <button id="xxx" onclick="last()">上一页</button>

 <button id="yyy" onclick="next()">下一页</button>
 </tfoot>
</body>
</html>

<script>
window.onload = function(){
    queryData()
}
let pagenum=1;
let pagesize=5;
function queryData() {
    console.log("Sending pagenum: " + pagenum + ", pagesize: " + pagesize);
    $.ajax({
        url: "message/query",
        type: "get",
        dataType: "json",
        contentType:"application/json",
        data:{
            "pagenum":pagenum,
            "pagesize":pagesize
        },
        success: function (data) {
            if (data.code == 200){
                console.log(data);
                // console.log(data.data[0].u_name)
                $("#tb").empty();
                for (let i = 0; i < data.data.length; i++) {

                    let row = $("<tr>");
                    row.append("<td><input type='checkbox' name='chk'></td>");
                    row.append("<td>" + data.data[i].id + "</td>");
                    row.append("<td>" + data.data[i].u_name + "</td>");
                    row.append("<td>" + data.data[i].u_email + "</td>");
                    row.append("<td>" + data.data[i].u_phone + "</td>");
                    row.append("<td>" + data.data[i].message + "</td>");
                    // 格式化时间
                    let formattedTime = new Date(data.data[i].create_time).toLocaleString();
                    row.append("<td>" + formattedTime + "</td>");
                    row.append("<td><img src='" + data.data[i].backimg + "' width='100px' height='100px'></td>");
                    row.append("<td><button onclick='deleteMessage(" + data.data[i].id + ")'>删除</button></td>");
                    $("#tb").append(row);
                }
            }
        }
    })
}

function next() {
    $("#tb").empty();
    let a = pagenum;
    pagenum++;
    queryData();

    $.ajax({
        url: "message/query",
        type: "get",
        dataType: "json",
        contentType:"application/json",
        data:{
            "pagenum":pagenum,
            "pagesize":pagesize
        },
        success: function (data) {
            if (data.code == 200){
                if (data.data.length < pagesize) {
                    pagenum = a;
                }
                $("#tb").empty();
                for (let i = 0; i < data.data.length; i++) {
                    let row = $("<tr>");
                    row.append("<td><input type='checkbox' name='chk'></td>");
                    row.append("<td>" + data.data[i].id + "</td>");
                    row.append("<td>" + data.data[i].u_name + "</td>");
                    row.append("<td>" + data.data[i].u_email + "</td>");
                    row.append("<td>" + data.data[i].u_phone + "</td>");
                    row.append("<td>" + data.data[i].message + "</td>");
                    let formattedTime = new Date(data.data[i].create_time).toLocaleString();
                    row.append("<td>" + formattedTime + "</td>");
                    row.append("<td><img src='" + data.data[i].backimg + "' width='100px' height='100px'></td>");
                    $("#tb").append(row);
                }
            }
        }
    });
}

function last() {
    $("#tb").empty();
    pagenum--;
    if(pagenum<1){
        pagenum=1;
    }
    queryData();
}


function deleteMessage(id) {
    if (confirm("确定要删除这条信息吗？")) {
        $.ajax({
            url: "message/delete",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: { "id": id },
            success: function (data) {
                if (data.code == 200) {
                    alert("删除成功");
                    queryData();
                } else {
                    alert("删除失败");
                }
            }
        });
    }
}

</script>